<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			a {
				font-size: 100;
				text-decoration: none;
				font-size: 5px;
			}

			a:hover {
				color: red;
			}

			div#a1 div a {
				margin: 10px;
			}

			/* 主体盒子 */
			div#a1 {
				margin: 10px;
				width: 600px;
				height: 400px;
				border: 2px #F4F4F4 solid;
				position: absolute;
			}

			div#a2 {
				margin: auto;
				width: 480px;
				height: 20px;
				border: 2px white solid;
				display: flex;
				flex-wrap: wrap;


			}

			div#a3 {
				border: 2px white solid;
				margin: auto;
				width: 500px;
				height: 350px;
			}

			img {
				width: 500px;
				height: 360px;
				position: absolute;
			}

			div#a1 div.b1 a#a2 {
				position: absolute;

				right: 290px;
				bottom: 15px;
			}

			div#a1 div.b1 a#a3 {
				position: absolute;

				right: 320px;
				bottom: 15px;
			}

			div#a1 div.b1 a#a4 {
				position: absolute;

				right: 260px;
				bottom: 15px;
			}


			div#a1 div.b1 a {
				height: 12px;
				width: 12px;
				border-radius: 6px;
				margin-bottom: 7px;
				background-color: white;
			}
		</style>
	</head>
	<body>
		<div id="a1">
			<div id="a2">
				<div><a href="1.html">京东首页</a></div>
				<div><a href="1.html">京东家电</a></div>
				<div><a href="1.html">进口好物</a></div>
				<div><a href="1.html">我的京东</a></div>
				<div><a href="1.html">我的订单</a></div>
				<div><a href="1.html">京东会员</a></div>
				<div><a href="1.html">企业采购</a></div>
			</div>
			<div>
				<div id="a3"><img src="q.jpg" /></div>
			</div>
			<div class="b1">
				<a id="a2" href="#"></a>
				<a id="a3" href="#"></a>
				<a id="a4" href="#"></a>
			</div>
		</div>
	</body>
</html>
